<template>
  <div class="setting-url">
    <div class="setting-url-toolbar">
      <t-input v-model="keyword" style="width: 40vw" placeholder="链接名称" allow-clear />
      <t-space>
        <t-button theme="primary" @click="openAddLink()">新增</t-button>
        <t-dropdown trigger="click">
          <t-button theme="primary" shape="square">
            <template #icon>
              <more-icon />
            </template>
          </t-button>
          <t-dropdown-menu>
            <t-dropdown-item @click="exportUrlToJson()">
              <template #prefix-icon>
                <file-export-icon />
              </template>
              数据导出
            </t-dropdown-item>
            <t-dropdown-item @click="importUrlByJson()">
              <template #prefix-icon>
                <file-import-icon />
              </template>
              数据导入
            </t-dropdown-item>
          </t-dropdown-menu>
        </t-dropdown>
      </t-space>
    </div>
    <t-table
      ref="urlTable"
      row-key="id"
      :data="urls"
      :columns="linkTableColumn"
      class="data"
      sticky-header
      style="height: 100%"
      :draggable="true"
    >
    </t-table>
  </div>
</template>
<script lang="ts" setup>
import { useUrlStore } from "@/store";
import { getDefaultUrl } from "$/entity";

import MessageUtil from "@/utils/model/MessageUtil";
import { useFuse } from "@vueuse/integrations/useFuse";
import { download } from "@/utils/BrowserUtil";
import Constant from "@/global/Constant";
import { openAddLink } from "@/page/setting/pages/link/components/EditLink";
import { FileExportIcon, FileImportIcon, MoreIcon } from "tdesign-icons-vue-next";
import { linkTableColumn } from "@/page/setting/pages/link/components/LinkTableColumn";

const keyword = ref("");

const items = computed(() => useUrlStore().urls);
const { results } = useFuse(keyword, items, {
  matchAllWhenSearchEmpty: true,
  fuseOptions: {
    keys: [
      {
        name: "name"
      },
      {
        name: "value"
      }
    ]
  }
});
const urls = computed(() => results.value.map((e) => e.item));

// -------------------------------------- 方法 --------------------------------------

// 导入导出

function exportUrlToJson() {
  download(
    JSON.stringify(
      {
        version: Constant.version,
        records: useUrlStore().urls
      },
      null,
      4
    ),
    "链接导出.json",
    "application/json"
  );
}

const importFile = useFileSystemAccess({
  dataType: "Text",
  types: [
    {
      accept: {
        "application/json": [".json"]
      },
      description: "JSON文件"
    }
  ]
});

function importUrlByJson() {
  const rsp = importFile.open() as Promise<void>;
  rsp.then(() => {
    const value = importFile.data.value;
    if (!value) {
      MessageUtil.error("没有解析到数据，请确认上传文件是否正确");
    }
    handlerJson(value)
      .then(() => MessageUtil.success("导入成功"))
      .catch((e) => MessageUtil.error("导入失败", e));
  });
}

async function handlerJson(json?: string) {
  if (!json) {
    return Promise.reject("没有解析到数据，请确认上传文件是否正确");
  }
  let value;
  try {
    value = JSON.parse(json) as any;
  } catch (e) {
    return Promise.reject("JSON文件解析失败");
  }
  if (!value) {
    return Promise.reject("JSON未解析到数据");
  }
  let records = value.records;
  if (!records) {
    return Promise.reject("链接记录不存在");
  }
  if (!(records instanceof Array)) {
    return Promise.reject("数据格式错误，无法导入");
  }
  await useUrlStore().addByBatch(records.map((e) => getDefaultUrl(e)));
}
</script>
<style lang="less">
.setting-url {
  .setting-url-toolbar {
    display: flex;
    justify-content: space-between;
    margin: 8px 5px;
  }

  .url-copy {
    display: inline;
  }
}
</style>
